<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>业务清单导出</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-mb15">
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-date-picker
            class="u-w330"
            size="mini"
            v-model="searchDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="$store.state.PICKER_OPTIONS"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="searchParams.customer"
            placeholder="请输入客户名称或主体"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="searchParams.product"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="searchParams.channel"
            placeholder="请输入渠道名称或主体"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="searchParams.customerMemo"
            placeholder="请输入客户结算单备注"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="searchParams.channelMemo"
            placeholder="请输入渠道结算单备注"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="businessTypeModel"
            class="u-w160"
            size="mini"
            filterable
            clearable
            placeholder="业务类型"
          >
            <el-option
              v-for="item in BUSINESS_TYPE"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getTableData"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            @click="exportExcel"
          >导出数据</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>
      <el-table
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          v-for="(item, index) in filterTableColumn"
          align="center"
          :fixed="index === 0"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable"
        />
      </el-table>
    </Container>
  </div>
</template>

<script>
import Moment from "moment";
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";
import BusinessTypeMixin from "@/mixins/business-type";
export default {
  name: "cpa-data-business",
  components: {
    Container,
    CustomTableColumn
  },
  mixins: [BusinessTypeMixin],
  data() {
    return {
      // 选择日期
      searchDate: [
        Moment()
          .subtract(30, "days")
          .format("YYYY-MM-DD"),
        Moment().format("YYYY-MM-DD")
      ],
      // 搜索字段
      searchParams: {
        channel: "",
        channelMemo: "",
        customer: "",
        customerMemo: "",
        endDate: "",
        product: "",
        startDate: ""
      },
      //   表格
      tableColumn: [
        {
          label: "渠道账目周期",
          visible: true,
          prop: "dateCycle"
        },
        {
          label: "客户名称",
          visible: true,
          prop: "cunstomerName"
        },
        {
          label: "客户主体",
          visible: true,
          prop: "cunstomerFullName"
        },
        {
          label: "产品名称",
          visible: true,
          prop: "productName"
        },
        {
          label: "业务类型",
          prop: "cooperativeMode",
          visible: true
        },
        {
          label: "上游渠道号",
          visible: true,
          prop: "productChannelCode"
        },
        {
          label: "客户单价(元)",
          visible: true,
          prop: "customerPrice",
          sortable: true
        },
        {
          label: "客户结算量",
          visible: true,
          prop: "customerSettle",
          sortable: true
        },
        {
          label: "客户收入金额(元)",
          visible: true,
          prop: "customerAmount",
          sortable: true
        },
        {
          label: "客户结算单备注",
          visible: true,
          prop: "customerMemo"
        },
        {
          label: "渠道名称",
          visible: true,
          prop: "channelName"
        },
        {
          label: "渠道主体",
          visible: true,
          prop: "channelFullName"
        },
        {
          label: "渠道单价(元)",
          visible: true,
          prop: "channelPrice",
          sortable: true
        },
        {
          label: "渠道结算量",
          visible: true,
          prop: "channelSettle"
        },
        {
          label: "渠道收入金额(元)",
          visible: true,
          prop: "channelAmount",
          sortable: true
        },
        {
          label: "渠道结算单备注",
          visible: true,
          prop: "channelMemo"
        }
      ],
      tableData: [],
      businessTypeModel: ""
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    },
    filterTableLabel() {
      return this.filterTableColumn.map(item => item.label);
    },
    filterTableProp() {
      return this.filterTableColumn.map(item => item.prop);
    }
  },
  methods: {
    // 导出业务清单
    exportExcel() {
      if (!this.tableData.length) {
        return this.$message({
          type: "info",
          message: "没有可导出数据"
        });
      }
      let fileName = "业务清单-" + Moment().format("YYYY-MM-DD");
      this.handleDownload(
        this.filterTableLabel,
        this.filterTableProp,
        this.tableData,
        fileName
      );
    },
    // 获取表格数据
    getTableData() {
      if (!this.searchDate) {
        return this.$message({
          type: "info",
          message: "请选择日期范围"
        });
      }
      this.$http({
        method: "post",
        url: "/cpa/api/customer_channel/search",
        data: Object.assign({}, this.searchParams, {
          startDate: this.searchDate[0],
          endDate: this.searchDate[1],
          bizType: this.businessTypeModel
        })
      }).then(res => {
        this.tableData = res.data.list;
      });
    }
  }
};
</script>
